<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sass/index.css">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="CSS/swiper-bundle.min.css" />
    <script src="JS/jquery-1.11.0.min.js"></script>
    <!-- <script src="JS/common.js"></script> -->


    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        
        .swiper {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .swiper {
            margin-left: auto;
            margin-right: auto;
        }
        
        .swiper-button-next {
            color: #fff;
            background-color: #0505054d;
        }
        
        .swiper-button-prev {
            color: #fff;
            background-color: #0505054d;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <!-- 头部搜索栏 -->
            <div class="header ">
                <div class="login ">
                    <a href="try.html" class="log">登录</a> &emsp;
                    <a href="try.html" class="register">注册</a>
                </div>

                <div class="logo">
                    <div class="img">
                        <img src="img/logo-foot.png" alt="">
                    </div>
                    <div class="title">
                        <h3>熊猫优选</h3>
                        <span>xiong mao you xuan</span>
                    </div>
                </div>
                <div class="wrapper-search">
                    <div class="search">
                        <span>🔍</span>
                        <input type="text" placeholder="搜索商品. 发现更多优惠">
                        <div class="search-btn">搜索</div>
                    </div>
                </div>
                <div class="advantage">
                    <ul>
                        <li>
                            <img src="img/全程包邮.png" alt="">
                            <span>全程包邮</span>
                        </li>
                        <li>
                            <img src="img/七天退换.png" alt="">
                            <span>7天退换</span>
                        </li>
                        <li>
                            <img src="img/品质保证.png" alt="">
                            <span>品质保证</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <!-- 横条栏 -->
        <div class="normal">
            <div class="container">
                <ul>
                    <li class="index active"><a href="index.html">首页</a></li>
                    <li class="nine"><a href="coupon.html">9块9包邮</a></li>
                    <li class="coupon"><a href="postage.html">超值大额券</a></li>
                    <li class="ambulance"><a href="coolingWear.html">降温急救穿搭</a></li>
                </ul>
            </div>
        </div>
        <!-- 商城内容 -->
        <div class="view">
            <div class="container">
                <div class="indexBanner">
                    <div class="slideBar">
                        <ul>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/女装.png" alt="">
                                    <p>女装</p>
                                    <p>/女鞋</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/男装.png" alt="">
                                    <p>男装</p>
                                    <p>/男鞋</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/美妆.png" alt="">
                                    <p>美妆</p>
                                    <p>/个护</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/配饰.png" alt="">
                                    <p>配饰</p>
                                    <p>/箱包</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/零食.png" alt="">
                                    <p>零食王国</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/母婴.png" alt="">
                                    <p>母婴用品</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/手机.png" alt="">
                                    <p>手机</p>
                                    <p>/数码</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/内衣.png" alt="">
                                    <p>内衣袜子</p>
                                </div>
                            </li>
                            <li>
                                <div class="slideBarItem">
                                    <img src="img/文娱.png" alt="">
                                    <p>文娱</p>
                                    <p>/家居</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 轮播图模块 -->
                    <div class="bannercontainer">
                        <div class="banner-top">
                            <div class="slider">
                                <!-- Swiper -->
                                <div class="swiper mySwiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img src="img/秋冬细腿利器.jpeg" alt=""></div>
                                        <div class="swiper-slide"><img src="img/banner1.png" alt=""></div>
                                        <!-- <div class="swiper-slide">Slide 3</div>
                                        <div class="swiper-slide">Slide 4</div>
                                        <div class="swiper-slide">Slide 5</div>
                                        <div class="swiper-slide">Slide 6</div>
                                        <div class="swiper-slide">Slide 7</div>
                                        <div class="swiper-slide">Slide 8</div>
                                        <div class="swiper-slide">Slide 9</div> -->
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-pagination"></div>
                                </div>

                            </div>
                            <div class="topRight">
                                <h3>9块9包邮</h3>
                                <div class="prompt">保你不吃亏</div>
                                <img src="img/9块9包你不吃亏.gif" alt="">
                            </div>
                        </div>
                        <div class="bannerbottom">
                            <div class="special">
                                <h3>降温急救穿搭</h3>
                                <p>速来抢购～</p>
                                <span>Go</span>
                                <img src="img/降温急救穿搭.png" alt="">
                            </div>
                            <div class="special">
                                <h3>超值大额券</h3>
                                <p>又会直击底价</p>
                                <span>Go</span>
                                <img src="img/100优惠券.png" alt="">
                            </div>
                            <div class="special">

                                <p><a href="#">扫码下载APP  <br> 发现更多惊喜</a></p>

                                <img src="img/扫码下载app.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 小编精选栏 -->
        <div class="title-bar">
            <div class="container">
                <h3><a href="#">小编精选</a></h3>
                <p><a href="#">每天更新</a></p>
            </div>
        </div>
        <!-- 商品列表区 -->
        <div class="choice">
            <div class="container">
                <ul class="allProduct">
                    <!-- <li class="identify">
                    </li> -->


                    <!-- <li>
                        <div class="commodity-card">
                            <img src="img/vivo手机充电线.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>
                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/佳龙辣条亲亲嘴.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/马卡龙甜点.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/冰狐无声静音.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="commodity-card">
                            <img src="img/女巫小蛮腰紫色.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/护妍天使痘痘贴.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/抹茶粉烘焙.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/拉芳沐浴露.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="commodity-card">
                            <img src="img/收纳博士12丝.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/曹操饿了速食.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/植物香水洗衣液.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/澳宝新品沐浴露.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="commodity-card">
                            <img src="img/猫眼石发圈.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/矿大妈江西特产.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/秋天手套女士.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/米卡酷小小酥.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                    </li> -->
                    <!-- <li>
                        <div class="commodity-card">
                            <img src="img/美珊连凡士林润唇膏.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/老金磨方酸奶.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/肤美林凡士林.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                        <div class="commodity-card">
                            <img src="img/钢化膜苹果.jpeg" alt="">
                            <div class="msg">
                                <div class="title">清仓特卖泡沫拼接地垫婴幼儿爬爬垫…</div>
                                <div class="keyword">
                                    <span class="tmall">天猫</span>
                                    <span class="postage">包邮</span>
                                </div>
                                <div class="foot">
                                    <span class="price-tag">¥</span>
                                    <span class="price-strong">9</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">452人已买</span>
                                    <span class="coupon-value">10元券</span>
                                </div>

                            </div>
                        </div>
                    </li> -->
                </ul>

            </div>

        </div>
        <!-- 查看更多 -->
        <div class="choice-more">
            <div class="choice-more-btn" onclick="more()">查看更多</div>
        </div>
        <!-- 页脚 -->
        <div class="basefooter">
            <div class="container">
                <img src="img/logo-foot.png" alt="">
                <div class="content">
                    <h1 class="title">熊猫优选</h1>
                    <p class="slogan">年轻人网购首选 <br>购物领券更省钱 </p>
                </div>
                <div class="about-us">
                    <p>
                        <span>|</span>
                        <a href="#">下载APP</a>
                    </p>
                </div>
                <div class="footer">

                    <p>
                        <img src="img/警徽.png" alt="">
                        <span>浙公安网备案 33010602009949号 |</span>ICP备案号:
                        <a href="#">浙ICP备17012864号-1 |</a>
                    </p>

                    <p><img src="img/电子营业执照.png" alt=""><a href="#">证照信息</a></p>
                </div>
            </div>
        </div>

        <!-- 全国安全 -->
        <div class="security">
            <img src="img/全国安全可信网站.png" alt="">
        </div>
        <!-- 返回顶部 -->
        <div class="return1">
            <img src="img/返回顶部.png" alt="" class="goBack">
        </div>
    </div>
    <!-- Swiper JS -->
    <script src="JS/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
    <script src="JS/index.js"></script>
    <!-- 
</body>

</html>